<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="zd" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>购票页面</title>

<link rel="stylesheet" href="${zd}/static/plug/weui/css/weui.css"
	media="all">

<link rel="stylesheet" href="${zd}/static/plug/weui/css/weuix.css"
	media="all">
<link rel="stylesheet" href="${zd}/static/css/addCarNo.css" media="all">
<style type="text/css">
body {
	background-color: #ebebeb;
	color: #777;
}

.header {
	width: 100%;
	height: 140px;
	background-image: url("${zd}/static/images/block.jpg");
}

.header p {
	color: white;
	padding: 40px 0 0 0;
	text-align: center;
	margin: 0;
	font-size: 18px;
	
}

.subject {
	width: 100%;
}

.timeAndTicket {
	width: 95%;
	background-color: white;
	border-radius: 5px;
	margin: 20px auto;
}

.timeAndTicket>div {
	height: 34px;
}

.timeAndTicket>div>p {
	font-size: 16px;
	margin-left: 10px;
	margin-top: 1px;
}

.timeDate {
	border-bottom: 1px solid #666;
}

.ticket1 {
	border-bottom: 1px solid #e2d8d899;
}

.ticket2 {
	border-bottom: 1px solid #e2d8d899;
}

.ticket32 {
	border-bottom: 1px solid #e2d8d899;
}

.ticket2>p>span {
	font-size: 12px;
}

.spanDate {
	font-size: 18px;
	margin-left: 10px;
	margin-top: 2px;
}

#spanDateSelected {
	margin-top: 2px;
}

.ui-panel-title-tips {
	font-size: 12px;
	color: #777;
	position: absolute;
	right: 10px;
}

.ui-tic-title>span {
	text-align: center;
	width: 28px;
	height: 28px;
	border: 1px solid #999;
	display: inline-block;
	color: #666;
}

.ui-panel-title-tips>img {
	width: 15px;
	height: 15px;
	margin: 10px;
}

.reduce:active {
	background: olive;
}

.plus:active {
	background: olive;
}

.ticketNum {
	width: 50px;
}

.ticketCollector {
	width: 95%;
	background-color: white;
	border-radius: 5px;
	margin: 10px auto;
}


.ticketCollector>div>p {
	font-size: 18px;
	margin-left: 10px;
	padding-top: 5px;
}

.ticketCollector input {
	border: 0px;
	color: #888;
	font-size: 16px;
	width: 100%;
	padding-top: 5px;
}

.carNo>div {
	float: left;
}

.carNo>div>p {
	font-size: 18px;
	margin-left: 10px;
	padding-top: 5px;
}

.carNo {
	display: none;
}

.layui-m-layermain, .layui-m-layershade {
	height: 800px;
}

.touristInformation>div {
	width: 95%;
	background-color: white;
	border-radius: 5px;
	margin: 10px auto;
}


.touristInformation>div>div>p {
	font-size: 18px;
	margin-left: 10px;
	padding-top: 5px;
}

.touristInformation input {
	border: 0px;
	color: #888;
	font-size: 16px;
	width: 100%;
	padding-top: 5px;
}

.priceDisplay {
	position: fixed;
	bottom: 0px;
	height: 60px;
	width: 100%;
	background-color: white;
	z-index: 9999999999;
}

.priceDisplay>div {
	float: left;
	width: 50%;
	padding-top: 15px;
}

.prices {
	color: #f39800;
	padding-left: 30px;
	font-size: 16px;
}

.weui-icon-radio {
	float: right;
}

.weui-form-li>label {
	height: 30px;
	width: 100%;
	display: block;
}

.weui-form-text {
	margin-top: 0px;
	left: -21px;
}

.weui-form-text>p {
	font-size: 16px;
	margin-left: 10px;
}

.weui-form-text>p>span {
	font-size: 14px;
}

.ticket_price {
	font-size: 16px
}
.tick-form-li{
	margin-left: 25px;

}

.notes {
	width: 95%;
	background-color: white;
	border-radius: 5px;
	margin: 10px auto;
	position: relative;
}
.notes>p{
	padding-top: 10px;
	margin-left: 37px;;
	padding-bottom: 10px;
	position: relative;
}

.notes>p>img{
	display:inline-block;
	margin-top:5px;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 8px;
	left: -22px;
	
}
.icon-74{
	float: right;
	margin-right: 20px;
}
</style>


</head>
<body>

	<div class="header">
		<p>？？？？？？</p>
		<p>？？？？？？</p>
	</div>

	<div class="subject">
		<div class="timeAndTicket">
			<div style="height: 1px; width: 100%"></div>
		
			<div class="ticket1">

				<div class="weui-form-li tick-form-li" >
					<input class="weui-form-checkbox" name="f1" id="1" value="1"
						type="radio"> <label for="1">
						<div class="weui-form-text">
							<p>
								普通票&nbsp;&nbsp;&nbsp;&nbsp;￥<span class="ticket_price">50</span>
							</p>
						</div> <i class="weui-icon-radio"></i>
					</label>
				</div>
			</div>

			<div class="ticket2">
				<div class="weui-form-li tick-form-li">
					<input class="weui-form-checkbox" name="f1" id="2" value="3"
						type="radio"> <label for="2">
						<div class="weui-form-text">
							<p>
								团体票&nbsp;&nbsp;&nbsp;&nbsp;￥<span class="ticket_price">40</span><span>(必须满足3人条件)</span>
							</p>
						</div> <i class="weui-icon-radio"></i>
					</label>
				</div>
			</div>
			<div class="ticket32">
				<div class="weui-form-li tick-form-li">
					<input class="weui-form-checkbox" name="f1" id="3" value="5"
						type="radio"> <label for="3">
						<div class="weui-form-text">
							<p>
								打折票&nbsp;&nbsp;&nbsp;&nbsp;￥<span class="ticket_price">30</span><span>(必须满足5人条件)</span>
							</p>
						</div> <i class="weui-icon-radio"></i>
					</label>
				</div>
			</div>
			
			<div class="weui-cell" >
			<div class="weui-cell__hd">
				<p class="">
					选择日期 
				</p>
			</div>
					<div class="weui-cell__bd" >
					<span 
						style="float: right; font-size: 14px;  margin-right:8% ;color: #f39800"
						id="spanDateSelected">点击选择日期</span>
			</div>
			</div>
			
			<div class="weui-cell" style="height: 50px;">
			<div class="weui-cell__hd">
				<p>
					门票数量
				</p>
			</div>
				<div class="weui-cell__bd" >
					<span class="ui-tic-title"
						style="margin-right:8% ; font-size: 14x; padding-top: 2px;float: right;">
						<span class="reduce">-</span> <span class="ticketNum"
						style="width: 46px;">1</span> <span class="plus">+</span>
					</span>
			</div>

		</div>

	</div>
	<p style="padding-left: 10px;">
		取票人信息 <span class="ui-panel-title-tips"
			style="margin-right: 15px; font-size: 16px;">选择联系人</span>
	</p>
	<div class="ticketCollector">
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">姓名</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" placeholder="请输入姓名（必填）" type="text">
			</div>

		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">手机号</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" placeholder="请输入手机号（必填）" maxlength="11" pattern="[0-9]{11}" type="tel">
			</div>

		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">身份证</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" placeholder="请输入身份证（选填）" maxlength="18" pattern="[0-9]{17}[xX0-9]" type="tel">
			</div>

		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">是否驾车</label>
			</div>
			<div class="weui-cell__bd">
				<div class="weui-cell__ft" style="padding-top: 3px;float: right;padding-right: 8%">
					<label for="switchCP" class="weui-switch-cp"> <input
						id="switchCP" class="weui-switch-cp__input" 
						type="checkbox">
						<div class="weui-switch-cp__box"></div>
					</label>
				</div>
			</div>
		</div>
		
		<div class="carNo weui-cell" style="height: 55px;">
		<div class="weui-cell__hd" style="width: 24%;">
				<label class="weui-label">添加车牌</label>
			</div>

			<div style="width: 76%;" class="car_input weui-cell__bd" >
				<ul class="clearfix ul_input car_no" id="carNoUl">
					<li class="input_pro"><span></span></li>
					<li class="input_pp input_zim"><span></span></li>
					<li style="width: 5%">·</li>
					<li class="input_pp"><span></span></li>
					<li class="input_pp"><span></span></li>
					<li class="input_pp"><span></span></li>
					<li class="input_pp"><span></span></li>
					<li class="input_pp"><span></span></li>
					<li class="input_pps"><span class="have-text">+</span></li>
				</ul>
			</div>


		</div>
	</div>
	<div class="carNobmer" id="carNobmer"></div>

	<div class="touristInformation">
		<p style="padding: 10px 0 0 10px;">
			游客信息 <span class="ui-panel-title-tips"
				style="margin-right: 15px; font-size: 16px;">选择联系人</span>
		</p>
		<div class="tourist">
			<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">姓名</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" placeholder="请输入姓名（必填）" type="text">
			</div>

		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">手机号</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" placeholder="请输入手机号（必填）" type="tel">
			</div>

		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">身份证</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" placeholder="请输入身份证（选填）" type="tel">
			</div>

		</div>
		</div>


	</div>
	
	<div class="notes">
		<p class=""><img src="${zd}/static/images/questionmark.png">购票须知<i class="icon icon-74"></i></p>
	</div>
	
	</div>
	<div style="height: 70px; width: 100%;"></div>
	<div class="priceDisplay">
		<div>
			<p class="prices">
				总额：￥<span class="price"></span>
			</p>
		</div>
		<div>
			<a href="javascript:;" class="weui-btn bg-orange">立即支付</a>
		</div>
	</div>
</body>

<script src="${zd}/static/js/jquery/jquery-3.2.1.min.js"></script>
<script src="${zd}/static/plug/frozenui-1.3.0/js/frozen.js"></script>

<script src="${zd}/static/js/laydate/laydate.js"></script>
<script src="${zd}/static/js/user/addCarNo.js"></script>
<script src="${zd}/static/plug/layer_mobile/layer.js"></script>
<script src="${zd}/static/js/common.js"></script>
<script src="${zd}/static/plug/weui/js/zepto.weui.js"
	type="text/javascript"></script>
	
	
	<script src="${zd}/static/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: "${signature.appId}", // 必填，公众号的唯一标识
    timestamp: "${signature.timestamp}", // 必填，生成签名的时间戳
    nonceStr: "${signature.nonceStr}", // 必填，生成签名的随机串
    signature: "${signature.signature}",// 必填，签名，见附录1
    jsApiList: ['scanQRCode', 'chooseWXPay']
    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});


	$(".weui-btn").click(function() {
		 $.post("http://test.ticketing.boshukeji.com/unifiedorder", "", function (obj) {
             console.log(obj);
             canSubmit = true;
             if (obj.result) {
                 var wxPayParams = JSON.parse(obj.data);
                 console.log(wxPayParams);
                 wx.chooseWXPay({
                     timestamp: wxPayParams.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                     nonceStr: wxPayParams.nonceStr, // 支付签名随机串，不长于 32 位
                     package: wxPayParams.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                     signType: wxPayParams.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                     paySign: wxPayParams.paySign, // 支付签名
                     success: function (res) {
                         console.log("pay success");
                         showTips("warn", "充值成功！");
                         window.location.href = "${action}?params=" + paramObj.myMoneyParams;
                     }
                 });
             } else {
                 showTips("warn", obj.msg);
                 //location.reload(true);
             }
         });
		
	});

</script>	
	
	
	
<script>
	$(function() {
		if ($("#switchCP").prop("checked")) {
			$(".carNo").css("display", "block");
		} else {
			$(".carNo").css("display", "none");
		}

		$(".weui-form-li>label").click(function() {
			setTimeout(ticketPrice, 500);
		});

		var mintickets = $("input[type='radio'][name='f1']:checked").val();
		mintickets = parseInt(mintickets);
		var prices = $("input[type='radio'][name='f1']:checked").parents(
				".weui-form-li").find(".ticket_price").text();
		if(prices){
			prices = parseInt(prices);
			console.log(prices);
		}else{
			prices = 0;
			console.log(prices);
		}
		ticketPrice();

		function ticketPrice() {
			var num = $("input[type='radio'][name='f1']:checked").val();
			var ticketPrices = $("input[type='radio'][name='f1']:checked")
					.parents(".weui-form-li").find(".ticket_price").text();
			ticketPrices = parseInt(ticketPrices);
			if(ticketPrices){
				prices = ticketPrices;
				console.log(prices);
			}
			console.log(ticketPrices);
			$(".ticprice").text(ticketPrices);

			num = parseInt(num);
			htmlUtil(num);
			mintickets = num;
			$(".tickets").text(num);
			if (num && ticketPrices) {
				$(".ticketNum").text(num);
				$(".price").text(num * ticketPrices);
				return;
			}
			$(".ticketNum").text(1);
			$(".price").text(0);
			$(".ticprice").text(0);
			$(".tickets").text(1);
		}

		$("#switchCP").click(function() {
			if ($("#switchCP").prop("checked")) {
				$(".carNo").css("display", "block");

			} else {
				$(".carNo").css("display", "none");
				$("#carNobmer").html("");
			}
		});

		$("#spanDateSelected").bind("click", function() {
			dateTimes();
		});
		laydate.render({
			elem : '#spanDateSelected' //指定元素
			,
			min : '00:00:00',
			change : function(value, date, endDate) {
				ins1.hint("请选择日期"); //在控件上弹出value值
			},
			showBottom : false
		});
		$(".plus").click(function() {
			var num = $(".ticketNum").html();
			num = parseInt(num);
			$(".ticketNum").text(num + 1);
			$(".tickets").text(num + 1);
			htmlUtil(num + 1);
			$(".price").text((num + 1) * prices);
		});
		$(".reduce").click(function() {
			var num = $(".ticketNum").html();
			console.log(num);
			num = parseInt(num);
			console.log(mintickets);
			if (num > mintickets) {
				$(".ticketNum").text(num - 1);
				$(".tickets").text(num - 1);
				$(".price").text((num - 1) * prices);
				htmlUtil(num - 1);
			}
		});

		
		
		
		
		function htmlUtil(val) {
			var html = '<div class="tourist"><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">姓名</label></div>'+
			'<div class="weui-cell__bd"><input class="weui-input" placeholder="请输入姓名（必填）" type="text"></div></div>'+
			'<div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">手机号</label></div>'+
			'<div class="weui-cell__bd"><input class="weui-input" placeholder="请输入手机号（必填）" pattern="[0-9]{11}"  type="tel"></div></div>'+
			'<div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">身份证</label></div>'+
			'<div class="weui-cell__bd"><input class="weui-input" placeholder="请输入身份证（选填）" type="tel"></div></div></div>';
			console.log(val);
			console.log(html);
			var htmlVal = html;
			for (var int = 1; int < val; int++) {
				htmlVal += html
			}

			$(".touristInformation")
					.html(
							'<p style="padding: 10px 0 0 10px;">游客信息 <span class="ui-panel-title-tips"style="margin-right: 15px; font-size: 16px;">选择联系人</span></p>'
									+ htmlVal);
		}

		var carNo;
		$("#btnCancel").click(function() {
			$(".ui-dialog").removeClass("show");
		});

		$("#newCarCheckBox").click(function() {
			if (this.checked) {
				$("#carNoUl").append(genCarNoInput());
				$("#carNoUl").removeClass("car_no");
				$("#carNoUl").addClass("new_car_no");
			} else {
				$("#carNoUl").addClass("car_no");
				$("#carNoUl").removeClass("new_car_no");
				$("#carNoUl li:last").remove();
			}
		});

		var paramObj = {
			"bindCarNoParams" : "${bindCarNoParams}",
			"generateCouponParams" : "${generateCouponParams}"
		};

		$("#btnAddCarNo").click(function() {
			carNo = $(".car_input").attr("data-pai");
			var ifNewCarNo = $("#newCarCheckBox")[0].checked;
			if (!carNo || carNo.length < 7) {
				showTips("warn", "车牌号位数不对！");
				return;
			}

			if (carNo.length < 8 && ifNewCarNo) {
				showTips("warn", "新能源车牌为8位！");
				return;
			}

			if (!ifNewCarNo) {
				carNo = carNo.substr(0, 7);
			}
			$(".ui-dialog").addClass("show");
			$(".ui-dialog-bd p").html("车牌是否为：" + carNo);
		});

	});

	function dateTimes() {
		var date = new Date();
		var currentDate = date.getFullYear() + '-' + (date.getMonth() + 1)
				+ '-' + date.getDate();
		$("#spanDateSelected").html(currentDate);

		laydate.render({
			elem : '#spanDateSelected' //指定元素
			,
			min : '00:00:00',
			change : function(value, date, endDate) {
				ins1.hint("请选择日期"); //在控件上弹出value值
			},
			showBottom : false
		});

	}
</script>
</html>